<template>
  <page-loading :show="pageLoading">
    <!-- 交车报告 -->
    <view class="delivery-car-report">
      <view class="main">
        <!-- 预检 -->
        <view v-for="(item, i) in list" :key="i" class="item-box">
          <view
            class="title-box flex flex-ai-c flex-jc-sb"
            @click="gotoPage(i)"
          >
            <view class="title flex flex-ai-c">
              <view class="line"></view>
              <text>{{ testList[i].itemName }}</text>
            </view>
            <u-icon name="arrow-right"></u-icon>
          </view>

          <!-- 检查结果 -->
          <view class="test-items">
            <view v-if="item.complete">
              <view class="item">
                <view class="label-name flex flex-ai-c">
                  <i-icon
                    icon="iconquxiaoxunjia"
                    size="38rpx"
                    color="#EB5C02"
                  ></i-icon>
                  <text>
                    异常项目
                    <text class="color-EB5C02"> {{ item.abnormal }} </text>项
                  </text>
                </view>

                <view class="row">
                  <text>
                    已修复
                    <text class="color-EB5C02"> {{ item.repairuccess }} </text
                    >项
                  </text>
                </view>
                <view class="row">
                  <text>
                    未修复
                    <text class="color-EB5C02"> {{ item.repairFailure }} </text
                    >项
                  </text>
                </view>
              </view>

              <view class="item" v-if="i !== 2">
                <view class="label-name flex flex-ai-c">
                  <i-icon
                    icon="icontishi"
                    size="38rpx"
                    color="#D0D0D0"
                  ></i-icon>
                  <text>
                    未检查项目
                    <text class="color-EB5C02"> {{ item.didNotDetect }} </text
                    >项
                  </text>
                </view>
              </view>

              <view class="item" v-if="i !== 2">
                <view class="label-name flex flex-ai-c">
                  <i-icon
                    icon="icontijiaochenggong"
                    size="38rpx"
                    color="#4FAF26"
                  ></i-icon>
                  <text>
                    正常项目
                    <text class="color-EB5C02"> {{ item.normal }} </text>项
                  </text>
                </view>
              </view>
            </view>
            <view v-else class="test-items color-EB5C02">
              <view class="item">
                <view class="label-name flex flex-ai-c">
                  <i-icon icon="iconwei" size="38rpx" color="#EB5C02"></i-icon>
                  <text> 检查未完成，请确认完成 </text>
                </view>
              </view>
            </view>

            <!-- 签字确认 -->
            <view v-if="i !== 3" class="item qz-item flex flex-jc-sb flex-ai-c">
              <view class="label-name flex flex-ai-c">签字确认</view>
              <view v-if="item.signature" class="right-val">已签字确认</view>
              <view v-else class="right-val color-EB5C02">待签字确认</view>
            </view>
            <view
              v-else-if="signature"
              class="item qz-item flex flex-jc-sb flex-ai-c"
            >
              <view class="label-name flex flex-ai-c">签字确认</view>
              <view class="right-val">已签字确认</view>
            </view>
          </view>
        </view>

        <!-- 客户签字按钮 -->
        <view class="btn-box" v-if="!signature">
          <button class="btn btn-bg-yellow" @click="gotoSign">
            客户确认签字
          </button>
        </view>
      </view>
    </view></page-loading
  >
</template>

<script>
export default {
  data() {
    return {
      signature: false,
      list: [],
      testList: [
        {
          itemName: '预检',
          url: '/pages_afterSales/visualCheck/visualCheckReport',
          url2: '/pages_afterSales/visualCheck/visualCheckOutside',
        },
        {
          itemName: '上检',
          url: '/pages_afterSales/dismantleCheck/dismantleCheckReport',
          url2: '/pages_afterSales/dismantleCheck/dismantleCheck',
        },
        {
          itemName: '施工异常',
          url: '/pages_afterSales/constructionOrder/constructionOrder',
          url2: '/pages_afterSales/constructionOrder/constructionOrder',
        },
        {
          itemName: '质检',
          url: '/pages_afterSales/qualityTest/qualityTest',
          url2: '/pages_afterSales/qualityTest/qualityTest',
        },
      ],
      pageLoading: false, //初始化加载效果
    }
  },

  onLoad(e) {
    this.id = e.id
  },

  onShow() {
    this.getInfo()
  },

  methods: {
    getInfo() {
      this.$api.afterSales
        .getDeliveryReport({
          order_Arrive_Store_Id: this.id,
        })
        .then((res) => {
          console.log(res)
          this.signature = res.data.signature
          this.list = [
            { ...res.data.yj },
            { ...res.data.sj },
            { ...res.data.sg },
            { ...res.data.inspection },
          ]
          this.pageLoading = true
        })
        .catch(() => {
          this.pageLoading = true
        })
    },

    gotoPage(i) {
      if (this.list[i].complete) {
        uni.navigateTo({
          url: this.testList[i].url + '?id=' + this.id,
        })
        // } else {
        //   uni.navigateTo({
        //     url: this.testList[i].url2 + '?id=' + this.id,
        //   })
      }
    },

    gotoSign() {
      if (!this.list[3].complete) {
        uni.showToast({
          title: '请先进行质检',
          icon: 'none',
        })
        return
      }
      this.$store.commit('afterSales/setSignData', {
        id: this.id,
        type: 2,
        figure: 1,
      })
      let datas = JSON.stringify({
        type: 'before',
        count: 2,
        fnName: 'arrvialOrderSign',
      })
      uni.navigateTo({
        url:
          '/pages_afterSales/orderConfirm/customerConfirm?typeOptions=' + datas,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.delivery-car-report {
  min-height: 100%;
  background-color: #f4f4f4;
}

.main {
  padding: 20rpx 24rpx;

  .item-box {
    padding: 30rpx 20rpx;
    background-color: #fff;
    border-radius: 10rpx;

    & + .item-box {
      margin-top: 20rpx;
    }

    // 小标题
    .title-box {
      font-size: 28rpx;
      color: #666;

      // 小黄竖线
      .line {
        width: 8rpx;
        height: 28rpx;
        margin-right: 14rpx;
        background: #ffe23e;
        border-radius: 4rpx;
      }
    }
  }

  // 检查项
  .test-items {
    .item {
      padding: 30rpx 0;

      & + .item {
        border-top: 1px solid #eee;
      }

      .label-name {
        > text {
          margin-left: 16rpx;
        }
      }

      // 修复项 - 小字
      .row {
        margin-left: 34rpx;

        > text {
          margin-left: 24rpx;
          font-size: 24rpx;
          color: #999;
        }
      }

      .color-EB5C02 {
        margin: 0 50rpx;
        color: #eb5c02;
      }
    }
  }
}

.btn-box {
  margin: 50rpx 0;

  .btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    margin: 0;
  }
}

.qz-item {
  border-top: 1px solid #eee;
}
</style>
